<template>
    <div class="main">
      <div class="main-1">
        <div class="main-2">
          <div class="main-3">
            <span style="margin-left: 15px; font-size: 13px;">
              编辑广告
            </span>
            <el-button style="margin-right: 15px;" @click="Return">返回</el-button>
          </div>
          <div class="main-4">
            <div class="main-5">
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
              >
                <el-form-item label="广告名称" prop="name">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="广告位置" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="请选择">
                    <el-option label="首页轮播" value="1" />
                    <el-option label="商城首页轮播" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="ruleForm.date1"
                    type="date"
                    placeholder="选择开始时间"
                    :default-value="new Date(2022, 11, 11)"
                  />
                </el-form-item>
                <el-form-item label="到期时间">
                  <el-date-picker
                    v-model="ruleForm.date2"
                    type="date"
                    placeholder="选择结束时间"
                    :default-value="new Date(2022, 11, 11)"
                  />
                </el-form-item>
                <el-form-item label="上线/下线" prop="type">
                  <el-checkbox-group v-model="ruleForm.type" :min="1" :max="2">
                    <el-checkbox label="上线" name="type" />
                    <el-checkbox label="下线" name="type" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="广告图片">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                  >
                    <div class="el-upload__text">
                      上传图片
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        图片大小不能超过 500kb
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item label="广告连接">
                  <el-select v-model="ruleForm.a" placeholder="请选择">
                    <el-option label="小程序" value="1" />
                    <el-option label="小程序" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="广告备注">
                  <el-input type="textarea" v-model="ruleForm.area"></el-input>
                </el-form-item>
              </el-form>
              <div class="btn"><el-button type="primary">保存</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive } from '@vue/reactivity'
  import type { FormInstance, FormRules } from 'element-plus'
  import { useRouter } from 'vue-router';
  const ruleForm = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    type: '',
    area:'',
    a:'',
  })
  const rules = reactive<FormRules>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
      {
        required: true,
        message: '权限组不能为空',
        trigger: ['blur', 'change'],
      },
    ],
  })
  const router: any = useRouter()
function Return() {
  router.push({ path: 'AdvertisingManagement' })
}
  </script>
  
  <style scoped>
  .main {
    width: 100%;
    margin: auto;
    background-color: #f2f2f2;
    height: 1000px;
    padding: 15px 20px;
    border-radius: 15px;
  }
  .main-1 {
    width: 96%;
    height: 99%;
    margin: auto;
    background-color: white;
    padding: 15px 20px;
    border-radius: 15px;
  }
  .main-2 {
    height: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 15px;
  }
  .main-3 {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    background-color: #f3f3f3;
    border-radius: 15px 15px 0 0;
    align-items: center;
  }
  .main-4 {
    background-color: white;
  }
  .main-5 {
    width: 40%;
    margin: auto;
    margin-top: 20px;
  }
  .btn{
    display: flex;
    justify-content: center;
  }
  </style>
  